<template>
	<view class="loading_box" v-show="is_loading" @click="switch_loading">
		<view class="loading">
			<image class="img rotate" src="/static/images/loading.png"></image>
			<!-- <view class="loader loader-17">
			  <view class="css-square square1"></view>
			  <view class="css-square square2"></view>
			  <view class="css-square square3"></view>
			  <view class="css-square square4"></view>
			  <view class="css-square square5"></view>
			  <view class="css-square square6"></view>
			  <view class="css-square square7"></view>
			  <view class="css-square square8"></view>
			</view> -->
			 <!-- <view class="loader loader-4"></view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			switch_loading(){
				this.$store.commit("switch_loading")
			}
		},
		computed:{
			is_loading(){
				return this.$store.state.loading
			}
		}
	}
</script>

<style>
@import "../../lib/loading_animate/loading.wxss";
.loading_box{
	width: 100%;
	height: 100vh;
	/* background-color: rgba(0,0,0,0.4); */
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10000;
}
.loading{
	width: 200rpx;
	height: 200rpx;
	background-color: rgba(0,0,0,0.5);
 
	position: relative;
	margin-left:275rpx ;
	margin-top: 40vh;
	line-height: 200rpx;
	text-align: center;
	border-radius: 20rpx;
}
.loading .img{
	width: 100rpx;
	height: 100rpx;
	margin-top: 50rpx;
}
.loading .loader{
	display:inline-block;
width:170rpx;
height:200rpx;
overflow:hidden;
/* background-color:#ccc; */
position:relative;

	
}

/* 无限旋转动画 */
	.rotate {
		-webkit-transition-property: -webkit-transform;
		-webkit-transition-duration: 1s;
		-moz-transition-property: -moz-transform;
		-moz-transition-duration: 1s;
		-webkit-animation: rotate 0.6s linear infinite;
		-moz-animation: rotate 0.6s linear infinite;
		-o-animation: rotate 0.6s linear infinite;
		animation: rotate 0.6s linear infinite;
	}

	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(359deg)
		}

		to {
			-webkit-transform: rotate(0deg)
		}
	}

	@-moz-keyframes rotate {
		from {
			-moz-transform: rotate(359deg)
		}

		to {
			-moz-transform: rotate(0deg)
		}
	}

	@-o-keyframes rotate {
		from {
			-o-transform: rotate(359deg)
		}

		to {
			-o-transform: rotate(0deg)
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(359deg)
		}

		to {
			transform: rotate(0deg)
		}
	}

	/* 无限旋转动画 end */
</style>
